<template>
	<view>
		<view class="top-nav">
			<view class="title">我的</view>
			<view class="top-data">
				<view class="message">
					<img :src="userData.avatar" alt="" class="photo" v-if="roles === 103">
					<view class="message-box">
						<view class="name-box">
							<view class="name" v-if="roles===103">{{ userData.name }}</view>
							<view class="name" v-else>{{ userData.userName }}</view>
							<!-- <view class="tag">头衔</view> -->
						</view>
						<view class="phone">
							{{ userData.phoneNumber }}
							{{ userData.belongStoreName?userData.belongStoreName:userData.storeName }}
						</view>
					</view>
				</view>
				<view class="icon" @click="toMyMessage('myMessage')">
					<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
				</view>
			</view>
		</view>
		<view class="bottom-data">
			<view class="detail" v-if="roles === 103">
				<!-- <view>职务：{{ userData.synopsis }}</view>
				<view>工龄：2.5年</view> -->
				<!-- <view>综合评分：{{ userData.score }}分</view> -->
			</view>
			<view class="inform" @click="toMyMessage('systemNotice')">
				<image src="../../static/icon/home/inform.png" mode="" class="image"></image>
				<view class="text">系统公告</view>
			</view>
			<view class="table">
				<view class="row" v-for="(item, index) in tableData" :key="index" @click="toNext(item)">
					<view class="box">
						<view class="left">{{ item.title }}</view>
						<view class="right">
							<view class="right-text">{{ item.text }}</view>
							<view class="icon" v-if="!item.slot">
								<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
							</view>
						</view>
					</view>
					<view class="contain" v-if="item.slot">
						<view class="card-box" v-for="(item, index) in cardData" :key="index">
							<image src="" mode="" class="image"></image>
							<view class="card">{{ item.text }}</view>
							<view class="download">下载</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" @confirm="confirm" title="提示" ref="uModal" :showCancelButton='true'>
			确定注销并退出系统吗？
		</u-modal>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import NavBar from '@/components/nav-bar/index.vue'
	import {
		getUserData,
		logout,
		getManageData1,
		getManageData2
	} from '@/api/system/mine'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				bgColor: '#FEEEE6',
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				type: "error",
				value: 100,
				show: false,
				tableData: [
					// {
					// 	title: '技师证书',
					// 	text: '已上传',
					// 	url:'/subPages/mine/masterCard'
					// },
					{
						title: '二维码',
						slot: true
					},
					{
						title: '修改密码',
						url: '/subPages/mine/editPassword'
					},
					// {
					// 	title: '软件设置',
					// 	url: '/subPages/mine/software'
					// },
					{
						title: '退出登录',
						value: 0
					},
				],
				cardData: [{
					text: '储值卡购买'
				}, {
					text: '会员卡购买'
				}],
				userId: '',
				userData: {},
				roles: ''
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		created() {
			this.userId = uni.getStorageSync('userId')
			this.roles = uni.getStorageSync('roles')
			this.isMaster()
		},
		methods: {
			isMaster() {
				if (this.roles === 103) {
					this.getUserData()
				}
				if (this.roles === 100) {
					this.getManageData1()
				}
				if (this.roles === 101) {
					this.getManageData2()
				}
			},
			getUserData() {
				getUserData({
					userId: this.userId
				}).then((res) => {
					this.userData = res.data
				})
			},
			getManageData1() {
				getManageData1().then((res) => {
					this.userData = res.data
				})
			},
			getManageData2() {
				getManageData2().then((res) => {
					this.userData = res.data
				})
			},
			gotonotification() { //前往消息通知
				this.$tab.navigateTo('/pages/mine/notification/notification')
			},
			membership() {
				this.$tab.navigateTo('/subPage1/membership/membership')
			},
			savings() {
				this.$tab.navigateTo('/subPage1/Savings/Savings')
			},
			jumpToSubPackageFirstPage() {
				this.$tab.navigateTo('/subPage1/coupon/coupon')
			},
			toMyMessage(item) {
				if (this.roles === 103) {
					uni.navigateTo({
						url: `/subPages/mine/${item}`,
					})
				} else {
					uni.navigateTo({
						url: `/subPages/mine/${item}?id=${this.userData.id}`,
					})
				}
			},
			toNext(item) {
				if (item.url) {
					uni.navigateTo({
						url: item.url,
					})
				}
				if (item.value === 0) {
					// this.logout()
					this.show = true
					// this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					// 	this.logout()
					// })
				}
				// handleToLogin() {
				// 	this.$tab.reLaunch('/pages/login')
				// },
				// handleToAvatar() {
				// 	this.$tab.navigateTo('/pages/mine/avatar/index')
				// },
				// handleLogout() {
				// 	this.$modal.confirm('确定注销并退出系统吗？').then(() => {
				// 		this.$store.dispatch('LogOut').then(() => {
				// 			this.$tab.reLaunch('/pages/index')
				// 		})
				// 	})
				// },

			},
			confirm() {
				this.logout()
			},
			logout() {
				logout().then((res) => {
					if (res.code === 200) {
						uni.redirectTo({
							url: '/pages/login',
						})
					}
				})

				// this.$modal.confirm('确定注销并退出系统吗？').then(() => {
				//   this.$store.dispatch('LogOut').then(() => {
				//     this.$tab.reLaunch('/pages/index')
				//   })
				// })

			}
		}
	}
</script>

<style lang="scss">
	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-nav {
		width: 100%;
		// height: 582rpx;
		// background: #FEEDE4;
		background: linear-gradient(to bottom, #feede4, #fbfafa);
		padding: 80rpx 40rpx 30rpx 37rpx;

		.title {
			text-align: center;
			font-size: 45rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}

		.top-data {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			.message {
				display: flex;


				.photo {
					width: 151rpx;
					height: 151rpx;
					border-radius: 50%;
					opacity: 1;
				}

				.message-box {
					margin-left: 20rpx;

					.name-box {
						display: flex;
						margin: 10rpx 0 20rpx;


						.name {
							font-size: 45rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}

						.tag {
							width: 104rpx;
							height: 48rpx;
							margin-left: 22rpx;
							background: linear-gradient(to right, #F4C869, #E5B135);
							border-radius: 39rpx;
							font-size: 30rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 48rpx;
							text-align: center;
							transform: translateY(7rpx);
						}
					}

					.phone {
						font-size: 32rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}
	}

	.bottom-data {
		padding: 0 38rpx;
		background: linear-gradient(to bottom, #fbfbfc, #f4f4f6);

		.detail {
			display: flex;
			justify-content: space-between;
			// margin-top: 30rpx;
			font-size: 35rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
		}

		.inform {
			// margin-top: 23rpx;
			width: 100%;
			// height: 91rpx;
			padding: 20rpx 0 20rpx 15rpx;
			background: linear-gradient(90deg, #FBEABF 0%, #F1CA8B 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			display: flex;

			image {
				width: 52rpx;
				height: 52rpx;
			}

			.text {
				font-size: 35rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				color: #522E12;
				line-height: 50rpx;
				margin-left: 20rpx;
			}
		}

		.table {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(204, 204, 204, 0.25);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			margin-top: 24rpx;
			padding: 0 20rpx 0 33rpx;

			.row {
				padding: 22rpx 0 20rpx 0;
				border-bottom: 1rpx solid #f2f2f2;

				&:last-child {
					border-bottom: none;
				}

				.box {
					display: flex;
					justify-content: space-between;

					.left {
						font-size: 40rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						color: #333333;
					}

					.right {
						display: flex;

						.right-text {
							font-size: 38rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.contain {
					display: flex;
					justify-content: space-around;

					.card-box {

						.image {
							width: 260rpx;
							height: 260rpx;
							margin-top: 25rpx;
						}

						.card {
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(0, 0, 0, 1);
							text-align: center;
							margin: 20rpx 0;
						}

						.download {
							width: 123rpx;
							height: 59rpx;
							opacity: 1;
							border-radius: 15rpx;
							background: rgba(255, 255, 255, 1);
							border: 1px solid rgba(197, 147, 74, 1);
							text-align: center;
							line-height: 59rpx;
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(197, 147, 74, 1);
							margin-left: 70rpx;
						}
					}

				}
			}
		}

	}
</style>